<template>
    <div>
        <h1>图片名称：{{id}}</h1>
        <img :src="msg.url" alt="">

        <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
        
        <com></com>
    </div>
</template>
<script>
import com from './subcommont/commom'
export default {
    data(){
        return{
            id:this.$route.params.id,
            msg:[],
            list: [{
               src: 'https://placekitten.com/600/400',
                w: 600,
                h: 400
            }, {
                src: 'https://placekitten.com/1200/900',
                w: 1200,
                h: 900
            }]

        }
    },
    components:{
      com
    },
    created(){
        this.getimg()
    },
    methods:{
        getimg(){
            this.$http.get('http://jsonplaceholder.typicode.com/photos/'+this.id)
            .then(res=>{
               this.msg=res.body
            })
        }
    }
}
</script>
<style scoped>
   img{
       width: 100%;
   }
</style>
